<!-- 一周项目一览表 -->
<template>
	<view>
		<view >
			<form>
				<view class="cu-form-group">
					<view class="title">搜索条件:</view>
					<input name="input" v-model="name" placeholder="名称/助记码/编码"></input>
					<button class='cu-btn bg-green shadow' @tap="queryClick()">查询</button>
					<button style="margin-left: 10px;" class='cu-btn bg-red shadow' @tap="selectedClick(index)">选择</button>
				</view>
			</form>
		</view>
		<view class="margin-top">
			<z-table :tableData='tableData' :columns='columns' :tableHeight="tableHeight" :showSelect="true" :singleSelect="true" :stickSide="true" @onSelect="tableSelecct"></z-table>
		</view>
		<view :style="{ width: 20+'px;', padding: padding+'px;'}">
			<uni-pagination title="标题文字" show-icon="true" :total="totalCount" :current="pageIndex" @change="paginationChanged"></uni-pagination>
		</view>
	</view>
</template>

<script>
	import { formatDateDay } from '@/utils/datetime.js'
	import { getDateRange } from '@/utils/index.js'
	import zTable from "@/components/z-table/z-table.vue"
	import uniPagination from '@/components/uni-pagination/uni-pagination.vue'
	var _self
	var canvaPie=null
	export default {
		props: {
			tableHeight: {
				type: Number,
				required: false
			},
			windowWidth: {
				type: Number,
				required: false
			},
			padding: {
				type: Number,
				required: false
			}
		},
		components: {
			zTable,
			uniPagination
		},
		data() {
			return {
				tableData:[],
				columns:[
					// { title:'序号',key:'index',width: 80 },					
					{ title:'编码',key:'code',width: 130 },
					{ title:'客户名称',key:'name',width: 380 },					
					{ title:'简称',key:'shortName',width: 160 }
				],
				name:'',
				pageIndex: 1,
				pageSize: 10,
				index: -1,
				totalCount: 0
			}
		},
		methods: {
			onLoad(options) {
				this.onRefresh()
			},
			onRefresh() {
		
				const params = {
					filter: this.name,
					pageIndex: this.pageIndex,
					pageSize: this.pageSize					 
				  }
				this.$minApi.getClientList(params).then(res => {

					const data = res
					this.totalCount = data.totalCount
					this.tableData = data.list					
				}).catch(err => {
					console.log(err)
				}).finally(() => {
					// this.$refs.refresh.endAfter() //通知下拉刷新组件刷新已经完成
				})
				
			},
			queryClick() {
				this.pageIndex = 1
				this.onRefresh()
			},
			selectedClick() {
				if(this.index > -1){
					const item = this.tableData[this.index]
					this.$emit('selected', item)
				}	
			},
			tableSelecct(vls) {
				this.index = vls[0]
			},
			paginationChanged(obj) {
				this.pageIndex = obj.current
				this.onRefresh()
			}
		}
	}
</script>

<style>
	/* .project-list+.project-list {
		margin-top: 2rpx !important;
	} */
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	.container {
		min-height: 400px !important;
	}
	/deep/.uni-pagination__num {
		left:120px !important;
	}
	/deep/.uni-pagination{
		width: 100% !important;
		padding: 5px;
	}
</style>
